@import 'typography';
@import 'modifiers';
@import 'z-index';

html {
    height: 100%;
}

.focalboard-body,
#focalboard-app {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    width: 100%;
    height: 100%;
    color: rgb(var(--center-channel-color-rgb));
    background: rgb(var(--center-channel-bg-rgb));
    padding: 0;
    margin: 0;
}

.focalboard-plugin-root {
    height: 100%;
}

.focalboard-body {
    --cursor-color: rgb(var(--center-channel-color-rgb));

    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    /* -webkit-font-smoothing: auto; */
    font-size: 14px;
    line-height: 24px;

    * {
        box-sizing: border-box;
        outline: 0;
        user-select: none;
    }

    .TeamIcon {
        box-sizing: content-box;
    }

    input,
    textarea,
    select,
    button {
        font-size: 100%; /* Normalize */
    }

    input,
    textarea {
        background: rgb(var(--center-channel-bg-rgb));
        color: rgb(var(--center-channel-color-rgb));
        border-radius: 4px;
        user-select: text;
    }

    a {
        text-decoration: none;
        color: rgb(var(--link-color-rgb));
    }

    hr {
        width: 100%;
        height: 1px;
        border: 0;
        color: rgba(var(--center-channel-color-rgb), 0.09);
        background-color: rgba(var(--center-channel-color-rgb), 0.09);
        margin-bottom: 8px;
    }

    #focalboard-app {
        button {
            &.style--none {
                background: transparent;
                border: 0;
                padding: 0;
            }
        }
    }

    .page-loading {
        margin: 50px auto;
    }

    /* App frame */

    #root {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    #frame,
    #main,
    .BoardPage {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Main app */

    .dragover {
        background-color: rgba(128, 192, 255, 0.4);
    }

    .octo-spacer {
        flex: 1;
    }

    /* Icons */

    .octo-icon {
        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji,
            'Noto Color Emoji', 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols;
        line-height: 1.2;
        align-self: baseline;
        overflow: visible;
        font-weight: normal;
    }

    .text-light {
        color: rgba(var(--center-channel-color-rgb), 0.56);
    }

    .octo-icontitle {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        min-width: 0;
    }

    /*-- Property list --*/

    .octo-propertyvalue {
        max-width: 100%;
        font-size: 12px;
        color: rgb(var(--center-channel-color-rgb));

        &.empty {
            color: rgba(var(--center-channel-color-rgb), 0.4);
        }

        .IconButton.delete-value {
            width: 16px;
            min-width: 16px;
            height: 16px;

            i {
                font-size: 16px;
            }
        }
    }

    /*-- Editable --*/

    .Editable {
        cursor: text;
    }

    .Editable.active {
        min-width: 100px;
    }

    .octo-placeholder {
        color: rgba(var(--center-channel-color-rgb), 0.4);
    }

    [contentEditable='true'] {
        user-select: text;
    }

    [contentEditable='true']:empty::before {
        content: attr(placeholder);
        display: block;
        color: rgba(var(--center-channel-color-rgb), 0.4);
    }

    .octo-propertyvalue.Editable.active,
    .octo-table-cell .Editable.active {
        border-radius: 3px;
        box-shadow: rgba(15, 15, 15, 0.05) 0 0 0 1px,
            rgba(15, 15, 15, 0.1) 0 3px 6px, rgba(15, 15, 15, 0.2) 0 9px 24px;
    }

    .octo-block img {
        max-width: 500px;
        max-height: 500px;
        margin: 5px 0;
        object-fit: contain;
        flex: none;
    }

    .octo-content {
        width: 100%;
    }

    .octo-block {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;

        &:hover {
            @include z-index(block-hover);
            position: relative;
        }

        > * {
            flex: 1 1 auto;
        }

        > .octo-block-margin {
            flex: 0 0 auto;
        }

        @media screen and (max-width: 975px) {
            padding-right: 10px;
        }
    }

    .octo-block-margin {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-end;

        @media not screen and (max-width: 975px) {
            width: 48px;
        }
    }

    .emoji-mart-category-list {
        display: flex;
        flex-wrap: wrap;
    }
}
